<template>
   <ClientOnly>
      <div class="AlanoneupLogin" :class="{ hideAlanoneupLogin: state.isShow }">
         <div class="loginContent" :class="{ loginContenthide: state.isShow }">
            <div class="m-left">
               <div class="image">
                  <el-image style="width: 100%; height: 100%" src="https://w.wallhaven.cc/full/k9/wallhaven-k9vmqm.jpg"
                     fit="cover" />
               </div>
            </div>
            <div class="m-right">
               <div class="logo" v-if="!state.switchlogin">
                  <h2>
                     <img :src="cnyzs.COMMON_LOGO" alt="" />
                  </h2>
               </div>
               <div class="title">
                  <template v-if="FTPSHOW">
                     <p>重置密码</p>
                  </template>
                  <template v-if="!FTPSHOW">
                     <p v-if="!state.switchlogin">登录</p>
                     <p v-else>注册</p>
                  </template>
               </div>
               <div class="loginForm" v-loading="state.loading">
                  <template v-if="!FTPSHOW">
                     <!-- 账号 -->
                     <div class="Form">
                        <input autofocus type="text" v-model="state.form.useraccount" />
                        <div class="name" ref="iptname1">登录账号</div>
                     </div>
                     <!-- 密码 -->
                     <div class="Form ">
                        <input type="password" v-model="state.form.password" @keyup.enter="signin" />
                        <div class="name" ref="iptname2">密码</div>
                     </div>
                     <!-- 邮箱 -->
                     <div v-if="state.switchlogin" class="Form ">
                        <input type="text" v-model="state.form.usermail" />
                        <div class="name" ref="iptname3">邮箱</div>
                     </div>
                     <!-- 验证码 -->
                     <div v-if="state.switchlogin" class="Form Yanzhengma">
                        <input type="text" v-model="state.form.code" />
                        <div class="name" ref="iptname4">验证码</div>
                        <el-button @click="sendCode">
                           {{ state.isSendCode === true ? '获取验证码' : `${state.count}` }}
                        </el-button>
                     </div>
                     <!-- 请求按钮 -->
                     <div class="Form btn">
                        <el-button v-if="!state.switchlogin" @click="signin">快速登录</el-button>
                        <el-button v-else @click="register">快速注册</el-button>
                     </div>
                  </template>
                  <template v-if="FTPSHOW">
                     <!-- 密码 -->
                     <div class="Form ">
                        <input type="password" v-model="FTPDATA.newpassword" @keyup.enter="signin" />
                        <div class="name" ref="iptname2">新密码</div>
                     </div>
                     <!-- 邮箱 -->
                     <div class="Form ">
                        <input type="text" v-model="FTPDATA.email" />
                        <div class="name" ref="iptname3">您的邮箱</div>
                     </div>
                     <!-- 验证码 -->
                     <div class="Form Yanzhengma">
                        <input type="text" v-model="FTPDATA.code" />
                        <div class="name" ref="iptname4">验证码</div>
                        <el-button @click="">获取验证码</el-button>
                     </div>
                     <!-- 请求按钮 -->
                     <div class="Form btn">
                        <el-button @click="">重置密码</el-button>
                     </div>
                  </template>
                  <!-- 忘记密码 -->
                  <div class="text">
                     <!-- <div class="left" @click="FTPSHOW = !FTPSHOW">{{ FTPSHOW === false ? '忘记密码？' : '返回登录' }}</div> -->
                     <template v-if="!FTPSHOW">
                        <div v-if="!state.switchlogin" class="right">新用户？<span @click="state.switchlogin = true">注册</span>
                        </div>
                        <div v-else class="right">已有账号？<span @click="state.switchlogin = false">登录</span></div>
                     </template>
                  </div>
                  <div class="doc" v-if="!state.switchlogin">
                     <div class="left"></div>
                     <div class="right"></div>
                     <div class="disanfang">
                        <div class="QQ" @click="">
                           <span class="iconfont icon-qq"></span>
                           <span>QQ登录</span>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- 关闭按钮 -->
            <div class="out" @click="clickOut">
               <span class="iconfont icon-guanbi5"></span>
            </div>
         </div>
      </div>
   </ClientOnly>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus';
const { cnyzs, openLogin } = storeToRefs(cnyzsCommonpinia())

const state = ref({
   switchlogin: false,
   isShow: false,
   isSendCode: true,
   count: 0 as any,
   loading: false,
   form: {
      useraccount: "", password: "", usermail: "", code: ''
   }
})

// 关闭登录框
const clickOut = (e: MouseEvent) => {
   const target = e.target as HTMLElement
   if (target.className === 'out') {
      state.value.isShow = true
      setTimeout(() => { openLogin.value = false; state.value.isShow = false }, 290)
   }
}



// 发送验证码 以及 倒计时
function yzmfn() {
   const YZM: any = useCookie("YZM", { sameSite: "strict" })
   if (!YZM.value) return
   if (YZM.value.time > new Date().getTime()) {
      state.value.count = '请稍后再试'
      state.value.isSendCode = false
   }
}
onMounted(() => yzmfn())
let intervalId: any = null
const sendCode = async () => {
   // 验证参数
   if (state.value.isSendCode === false) {
      const YZM: any = useCookie("YZM", { sameSite: "strict" })
      const num = (YZM.value.time - new Date().getTime()) / 1000;
      if (num <= 0) {
         state.value.isSendCode = true
         sendCode()
      } else {
         return ElMessage.warning(`请 ${Math.floor(num)} 秒后再试！`)
      }
   }
   if (!state.value.form.usermail) return ElMessage.warning('请输入邮箱')
   const mailsZz: RegExp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
   if (!mailsZz.test(state.value.form.usermail)) return ElMessage.warning('邮箱格式错误')
   const res: any = await cnyzsRequest('/api/user/mail', { method: 'POST', data: { mail: state.value.form.usermail } })
   if (res.status !== 200) {
      if (res.status === 500) return
      return ElMessage.error(res.message)
   }
   ElMessage.success(res.message)
   // 倒计时
   const YZM = useCookie("YZM", { expires: new Date(165165165165156), sameSite: "strict" })
   const obj = { time: (new Date().getTime() + 60000), count: 60 }
   YZM.value = JSON.stringify(obj)
   state.value.isSendCode = false
   state.value.count = 60 || ''
   intervalId = setInterval(() => {
      if (state.value.count > 0) {
         state.value.count = state.value.count - 1
         const obj2 = { time: obj.time, count: state.value.count }
         YZM.value = JSON.stringify(obj2)
      } else {
         clearInterval(intervalId)
      }
   }, 1000)
}

// 注册
const register = async () => {

   // 校验
   if (!state.value.form.useraccount || !state.value.form.password) return ElMessage.warning('账号信息请输入完整')
   if (!state.value.form.code) return ElMessage.warning('请输入验证码')
   state.value.loading = true
   const res: any = await cnyzsRequest('/api/user/register', { method: 'POST', data: state.value.form })
   if (res.status !== 200) return ElMessage.warning(res.message), state.value.loading = false
   setTimeout(() => {
      state.value.switchlogin = true
      ElMessage.success(res.message)
      setTimeout(() => {
         signin()
      }, 2000)
   }, 1000)
}

// 登录
const signin = async () => {
   // 验证参数
   if (!state.value.form.useraccount || !state.value.form.password) return ElMessage.warning('账号信息请输入完整')
   const res: any = await cnyzsRequest('/api/user/signin', { method: 'POST', data: state.value.form })
   if (res.status !== 200) return ElMessage.warning(res.message)
   const cookie = useCookie("CNYZSTOKEN", { expires: new Date(165165165165156), sameSite: "strict" })
   cookie.value = res.data
   ElMessage.success(res.message)
   setTimeout(() => {
      state.value.loading = false
      setTimeout(() => {
         window.location.reload()
      }, 2000)
   }, 1000)
}


// 忘记密码
const FTPSHOW = ref(false)
const FTPDATA = ref({
   email: '',
   code: '',
   newpassword: ''
})


// 发起 QQ登录请求
// const qqlogin = async () => {
//    const res: any = await request('/api/qqlogin-qq', { method: 'POST' })
//    if (res.code !== 200) return ElMessage.error(res.msg)
//    // window.open(res.data, '_self')
//    window.open(res.data, 'qq-login-window', 'width=600,height=400')
//    const si = () => {
//       const cookie = useCookie("TOKEN", { expires: new Date(165165165165156), sameSite: "strict" })
//       if (cookie.value) {
//          // 授权成功 删除标记
//          ElMessage.success('登录成功')
//          setTimeout(() => {
//             isShow.value = true
//             setTimeout(() => {
//                isShow.value = false
//                openLogin.value = false
//                setTimeout(() => {
//                   window.location.reload();
//                }, 1210)
//             }, 290);
//          }, 1500);
//       } else {
//          // 未授权 继续轮询
//          setTimeout(() => {
//             si()
//          }, 1000);
//       }
//    }
//    si()
// }



</script>
<style lang="scss" scoped>
.AlanoneupLogin {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 1000;
   background-color: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(7px);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   overflow: hidden;
   animation: show 0.3s ease-in-out;
   padding: 0 18px;

   .loginContent {
      display: flex;
      height: 470px;
      // border: 2px solid rgb(255 255 255);
      border-radius: var(--aoir-border-radius);
      box-shadow: 0 0 20px 0px #0000002e;
      animation: loginContentshow 0.3s ease-in-out;
      position: relative;


      .out {
         position: absolute;
         top: -8px;
         right: -8px;
         width: 30px;
         height: 30px;
         background-color: #ebebeb;
         border-radius: 50%;
         border: 2px solid #fff;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;

         .iconfont {
            font-size: 26px;
            padding: 0 0 1px 1px;
            color: #4a4a4a;
            transition: all .2s;
            pointer-events: none;
         }

         &:hover {
            .iconfont {
               color: var(--aoir-color-primary);
            }
         }
      }

      .m-left {
         width: 370px;
         height: 100%;
         border-radius: var(--aoir-border-radius) 0 0 var(--aoir-border-radius);

         .image {
            width: 100%;
            height: 100%;
            border-radius: var(--aoir-border-radius) 0 0 var(--aoir-border-radius);
            overflow: hidden;
         }
      }

      .m-right {
         width: 370px;
         background-color: #fff;
         padding: 25px 30px;
         border-radius: 0 var(--aoir-border-radius) var(--aoir-border-radius) 0;
         overflow: hidden;
         box-shadow: 0 0 12px rgb(0 0 0 / 30%);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         // border: 2px solid rgb(255, 255, 255);
         background: rgba(255, 255, 255, 1);
         backdrop-filter: blur(30px);
      }

      .logo {
         width: 100%;
         height: 50px;
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
         margin-top: 20px;

         .imagelogo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            margin: 0;
            height: 55px;
            width: 220px;
         }

         h2 {
            width: 150px;
            font-size: 30px;
            color: var(--aoir-color-primary) !important;

            img {
               width: 100%;
            }

            // a {
            //    color: var(--aoir-color-primary) !important;
            // }
         }
      }

      .title {
         width: 100%;
         height: 50px;
         display: flex;
         justify-content: center;
         align-items: center;

         p {
            font-size: 26px;
            color: #c3c3c3;
            transform: scale(0.6);
         }
      }

      .loginForm {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-top: 10px;

         .Form {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            position: relative;

            &:nth-last-child(1) {
               margin-bottom: 0;
            }

            .name {
               position: absolute;
               top: -12px;
               left: 20px;
               padding: 2px 7px;
               background-color: #FFF;
               font-size: 15px;
               color: #999;
               transition: all 0.3s ease-in-out;
               border-radius: 8px;
            }

            input {
               width: 100%;
               height: 100%;
               border: none;
               outline: none;
               border: 1px solid #eee;
               font-size: 18px;
               padding: 15px 10px 10px;
               border-radius: 8px;
               transition: all 0.3s ease-in-out;
               color: #666;

               &:focus {
                  border: 1.5px solid var(--aoir-color-primary);

                  .name {
                     color: var(--aoir-color-primary);
                  }
               }

            }

            .el-button {
               width: 100%;
               height: 100%;
               border: none;
               outline: none;
               border: 0px solid var(--aoir-color-primary);
               font-size: 18px;
               padding: 10px;
               border-radius: 8px;
               transition: all 0.3s ease-in-out;
               color: #666;
               background-color: var(--aoir-color-primary-2);
               color: #fff;

               // 按住时 按钮下沉一点
               &:active {
                  transform: translateY(5px);
               }
            }

         }

         .Yanzhengma {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            position: relative;

            input {
               width: 70% !important;
               margin-right: 20px;
            }
         }

         .btn {
            margin-bottom: 10px;
         }

         .text {
            width: 100%;
            height: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 0 2px;

            .left {
               font-size: 13px;
               color: #999;
               cursor: pointer;

               &:hover {
                  color: var(--aoir-color-primary);
               }
            }

            .right {
               font-size: 13px;
               color: #999;
               cursor: pointer;

               span {
                  color: var(--aoir-color-primary);
               }
            }
         }

         .doc {
            width: 100%;
            height: 55px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;

            .left {
               width: 100px;
               height: 1px;
               background-color: #eee;
            }

            .right {
               width: 100px;
               height: 1px;
               background-color: #eee;
            }

            .disanfang {
               font-size: 13px;
               color: #999;
               position: absolute;
               left: 50%;
               transform: translateX(-50%);

               .QQ {
                  font-size: 40px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  transition: all .2s;

                  &:hover {
                     transform: translateY(-3px);
                  }

                  &:active {
                     transform: translateY(3px);
                  }

                  span {
                     font-size: 12px;
                  }

                  .iconfont {
                     font-size: 35px;
                     color: #2196F3;
                     margin-bottom: 2px;
                  }
               }
            }
         }
      }
   }

   .loginContenthide {
      animation: loginContenthide 0.3s ease-in-out;
   }

   @keyframes loginContentshow {
      0% {
         opacity: 0;
         transform: translateY(-10%);
      }

      100% {
         opacity: 1;
         transform: translateY(0);
      }
   }

   @keyframes loginContenthide {
      0% {
         opacity: 1;
         transform: translateY(0);
      }

      100% {
         opacity: 0;
         transform: translateY(-10%);
      }
   }
}

@keyframes show {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.hideAlanoneupLogin {
   animation: hide 0.3s ease-in-out;
}

@keyframes hide {
   0% {
      opacity: 1;

   }

   100% {
      opacity: 0;
   }
}
</style>